<template>
  <div class="move-commodity-page">
    <swh-drag-box
      :title="'选择要移动到的分类'"
      :zIndex="99"
      :top="'100px'"
      :isMask="true"
      :isPadding="false"
      @closePortability="close"
      @confirmDarg="confirmBox"
    >
      <div class="class-list" v-if="classList.length">
        <div
          class="class-item"
          :class="{ active: item.id === activeClassId }"
          v-for="item in classList"
          :key="item.id"
          @click="activeClass(item.id)"
        >
          <span>{{ item.name }}</span>
          <span>{{ item.num }}</span>
        </div>
      </div>
      <div class="class-list" v-else>
       <p class="no-data">暂无其他分类</p> 
      </div>
    </swh-drag-box>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { getLS } from '@/utils/common.js';
export default {
  name: '',
  props: {
    hideClass: {
      type: String,
      default: ''
    }
  },
  setup(props, ctx) {
    const data = reactive({
      classList: [],
      activeClassId: ''
    });
    onBeforeMount(() => {});
    onMounted(() => {
      const allData = getLS('COMMODITY_DATA') || [];
      if (allData.length > 1) {
        allData.forEach((item) => {
          if (item.id !== props.hideClass) {
            data.classList.push({
              name: item.className,
              num: item.commodityLists.length,
              id: item.id
            });
          }
        });
      }
    });
    const close = () => {
      ctx.emit('close');
    };
    const activeClass = (id) => {
      data.activeClassId = id;
    };
    const confirmBox = () => {
      if (!data.activeClassId) {
        Message({
          type: 'error',
          content: '请选择分类'
        });
      } else {
        ctx.emit('confirmMove', data.activeClassId);
      }
    };
    return {
      activeClass,
      confirmBox,
      close,
      ...toRefs(data)
    };
  }
};
</script>
<style scoped lang="less">
.class-list {
  width: 460px;
  padding: 10px;
  height: 500px;
  overflow-y: auto;
  .class-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 36px;
    padding: 0 20px;
    color: @HSB;
    cursor: pointer;
    &:hover {
      background-color: @TSD;
    }
    &.active {
      background-color: @TSB;
      color: #fff;
    }
  }
  .no-data{
    text-align: center;
    margin-top: 100px;
    color: @HSB;

  }
}
</style>
